import { h, Component } from 'preact';
import ReactModal from 'react-modal';
import elementClass from 'element-class';
import s from './Message.scss';

const style = {
	overlay : {
		position          : 'fixed',
		top               : 0,
		left              : 0,
		right             : 0,
		bottom            : 0,
		backgroundColor   : 'rgba(0, 0, 0, 0.45)'
	},
	content : {
		position                   : 'absolute',
		top                        : '40%',
		width                      : '80%',
		left                       : '10%',
		right                      : '10%',
		bottom                     : 'auto',
		minHeight                  : '20%',
		maxHeight                  : '80%',
		border                     : 'node',
		background                 : '#fff',
		overflow                   : 'auto',
		WebkitOverflowScrolling    : 'touch',
		borderRadius               : '1rem',
		outline                    : 'none',
		padding                    : '0'
	}
};

export default class Message extends Component {
	componentDidMount(){
		const { hide, title } = this.props;
		// setTimeout(hide,3000);
	}
	render() {
		const { hide, title } = this.props;
		return (
		<ReactModal
			shouldCloseOnOverlayClick={false}
			style={style}
			contentLabel=""
			className={s.tips}
			isOpen
			{ ...this.props }
		>
			<button className={s.close} onClick={hide}>×</button>
			<div className={s.content_box}>{title}</div>
		</ReactModal>
		);
	}
}
